<template>
  <div class='container'>
    <el-card class="card-tags">
      <!-- 面包屑导航 -->
      <div slot="header" class="clearfix" v-if="this.getSubjectID">
          <span>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item>学科管理</el-breadcrumb-item>
              <el-breadcrumb-item>
                {{ getSubjectName }}
              </el-breadcrumb-item>
              <el-breadcrumb-item>标签管理</el-breadcrumb-item>
            </el-breadcrumb></span>
      </div>

      <!-- 标签头部-->
      <el-row type="flex" align="middle" class="ipt">
        <span style="width: 74px">标签名称</span>
        <el-input v-model="TagName" class="ipt-target" style="width: 180px"></el-input>
        <span style="width: 40px">状态</span>
        <el-select v-model="value" style="width: 180px" value>
          <el-option value="启用" />
          <el-option value="禁用" />
        </el-select>
        <el-button style="margin-left: 10px" @click="clearFn">清除</el-button>
        <el-button style="margin-right: 340px" type="primary" @click="searchFn">搜索</el-button>
        <el-button
          icon="el-icon-back"
          size="small"
          type="text"
          v-if="this.getSubjectID"
        >
          <router-link to="/subjects/list">返回学科</router-link></el-button>
        <el-button style="margin-left: auto" icon="el-icon-edit" type="success" @click="addTagFn">新增标签</el-button>
      </el-row>

      <!-- 消息提示-->
      <el-alert
        :closable="false"
        style="margin-top: 18px; height: 36px; margin-bottom: 18px"
        :title='`数据一共${page.total}条`'
        type="info"
        show-icon>
      </el-alert>

      <!-- 表格部分-->
      <el-table ref="myTable" :data="mylist">
        <el-table-column align="center" width="100px" label="序号" type="index" />
        <el-table-column prop="subjectName" align="center" width="180px" label="所属学科" />
        <el-table-column prop="tagName" align="center" width="180px" label="标签名称" />
        <el-table-column prop="username" align="center" width="180px" label="创建者" />
        <el-table-column prop="addDate" align="center" width="220px" label="创建日期">
          <template v-slot="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="state" align="center" width="200px" label="状态">
          <template  v-slot="{ row }">
            <el-switch
              @change="changeState(row.id, row.state)"
              v-model="row.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" width="200px" label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="forbiddenFn(row.id, row.state)">
              {{ row.state === 1 ? '禁用' : '启用' }}
            </el-button>
            <el-button
              v-model="row.state"
              type="text"
              size="small"
              :disabled="row.state===1"
              @click="editTagFn(row.id)">修改</el-button>
            <el-button
              v-model="row.state"
              type="text"
              size="small"
              :disabled="row.state===1"
              @click="delTagFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页部分-->
      <el-row v-if="pageShow" type="flex" justify="end" align="middle" style="height: 60px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.page"
          :page-size="page.size"
          :page-sizes="[10, 20, 30, 40]"
          :total="page.total"
          layout="prev, pager, next, sizes, jumper"
        />
      </el-row>
    </el-card>

    <!-- 增加\修改 标签弹框-->
    <tags-add ref="addTag" :getSubjectID="getSubjectID" :id="id" :showTagDialog.sync="showTagDialog" />
  </div>
</template>

<script>
import { getAllTags, delTagById, changeState } from '@/api/hmmm/tags'
import TagsAdd from '../components/tags-add'

export default {
  name: 'SubjectsTags',
  components: {
    TagsAdd
  },
  data () {
    return {
      page: { // 页码及相关数据
        page: 1,
        size: 10,
        total: 0 // 数量
      },
      mytotal: 0, // 总数量
      // 获取url中的参数
      getSubjectID: '',
      getSubjectName: '',
      id: '',
      value: '', // 选择状态
      TagName: '', // 标签名称
      tagsList: [], // 标签列表
      tagState: '禁用', // 操作状态
      showTagDialog: false, // 控制标签弹框开关
      timeOut: null, // 防抖开关
      mystate: '',
      mylist: [], // 显示标签列表
      pageShow: true // 分页部分显示
    }
  },
  created () {
    this.getAllTags()
  },
  methods: {
    showPage () { // 筛选条件下显示数据条数
      if (!this.pageShow) {
        this.page.total = this.mylist.length
      } else {
        this.page.total = this.tagsList.length
      }
    },
    async getAllTags () {
      this.pageShow = true
      if (this.$route.query.id) { // 如果路径中存在 id 就获取
        this.getSubjectID = this.$route.query.id
        this.getSubjectName = this.$route.query.name
      }
      try {
        if (this.getSubjectID) {
          const { data } = await getAllTags({ // 获取标签列表
            subjectID: this.getSubjectID,
            page: this.page.page,
            pagesize: this.page.size
          })
          this.page.total = data.counts // 获取标签总数量
          this.mylist = data.items // 获取每页列表标签
        } else {
          const { data } = await getAllTags({ // 获取标签列表
            page: this.page.page,
            pagesize: this.page.size
          })
          this.page.total = data.counts // 获取标签总数量
          this.mytotal = data.counts
          this.mylist = data.items // 获取每页列表标签
        }
      } catch (err) {
        console.log(err)
      }
      this.getAllCounts()
    },
    async getAllCounts () { // 获取全部标签
      if (this.getSubjectID) {
        const { data } = await getAllTags({
          subjectID: this.getSubjectID,
          page: 1,
          pagesize: this.mytotal
        })
        this.tagsList = data.items
      } else {
        const { data } = await getAllTags({ // 获取标签列表
          page: 1,
          pagesize: this.mytotal
        })
        this.tagsList = data.items
      }
    },
    handleSizeChange (val) { // 每页数量改变
      this.page.size = val
      this.getAllTags()
    },
    async handleCurrentChange (val) { // 页码改变
      this.page.page = val
      if (this.getSubjectID) {
        const { data } = await getAllTags({
          subjectID: this.getSubjectID,
          page: this.page.page,
          pagesize: this.page.size
        })
        this.mylist = data.items
      } else {
        const { data } = await getAllTags({
          page: this.page.page,
          pagesize: this.page.size
        })
        this.mylist = data.items
      }
    },
    searchFn () { // 查找标签
      this.filterFn()
    },
    async filterFn () {
      this.page.page = -1
      if (this.value === '启用') {
        this.mystate = 1
      } else if (this.value === '禁用') {
        this.mystate = 0
      }
      if (!this.TagName || !this.value) {
        this.mylist = this.tagsList.filter(item => item.tagName === this.TagName || item.state === this.mystate)
      } else if (this.TagName && this.value) {
        this.mylist = this.tagsList.filter(item => item.tagName === this.TagName && item.state === this.mystate)
      }
      this.pageShow = false
      if (!this.TagName && !this.value) {
        this.handleCurrentChange(1)
        this.pageShow = true
      }
      this.showPage()
    },
    addTagFn () { // 新增目录
      this.showTagDialog = true
    },
    async delTagFn (id) { // 删除目录
      try {
        await this.$confirm('确定要删除此标签吗?', '提示', {
          type: 'warning'
        })
        await delTagById(id)
        if (!this.pageShow) {
          this.getAllCounts()
          setTimeout(() => {
            this.filterFn()
          }, 100)
        } else {
          this.getAllTags()
        }
        this.$message.success('删除成功!')
      } catch (err) {
        console.log(err)
        this.$message.error('删除标签失败')
      }
    },
    editTagFn (id) { // 修改标签
      this.showTagDialog = true
      this.$refs.addTag.getTagDetail(id)
    },
    clearFn () { // 清空关键字输入框
      this.TagName = ''
      this.value = ''
      this.mystate = ''
    },
    forbiddenFn (id, state) { // button 修改标签状态
      if (state === 1) {
        state = 0
      } else {
        state = 1
      }
      this.changeState(id, state)
    },
    changeState (id, state) { // switch 修改标签状态
      try {
        if (this.timeOut) clearTimeout(this.timeOut) // 防抖处理
        this.timeOut = setTimeout(async () => {
          await changeState(id, state)
          if (!this.pageShow) {
            this.getAllCounts()
            setTimeout(() => {
              this.filterFn()
            }, 100)
          } else {
            this.getAllTags()
          }
          this.$message.success('操作成功')
        }, 300)
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.card-tags {
  margin: 10px 18px 10px 18px;
  .ipt {
    margin-left: 18px;
    .ipt-target {
      margin-right: 30px;
    }
    span{
      font-weight: 700;
      font-size: 14px;
      color: #606266;
      margin-right: 10px;
    }
  }
  .el-button--text {
    font-size: 14px;
  }
}
</style>
